<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus v-model.trim="content" @keyup.enter="add"/>
	</header>
</template>

<script>
	export default {
       props: {
				 arr: {
					  type: Array,
						required: true
				 }
			 },

			 data() {
				return {
					  content: ''
				};
			 },

			 methods: {
				// todo ======  子传父   新增任务数据
				  add() {
              //  判断输入内容是否为空
							if(this.content.length === 0){
                   return alert('请输入内容')
							}
              
						   this.$emit('add', this.content);

							//  清空内容
							this.content = ''
					}
			 },

			//  todo  ====== 全选功能
			computed: {
				  isAll: {
						  set(val){
                  this.arr.forEach(item => item.isDone = val)
							},
							get () {
								  return this.arr.every(item => item.isDone === true)
							}
					}
			}
	}
</script>
